<template>
	<view class="matchmaking-container">
		<u-tabs :list="tabs" :current="currentTab" @change="changeTab" activeColor="#FF4E78" inactiveColor="#666"
			:bold="true" barWidth="40" barHeight="4"></u-tabs>

		<view v-if="currentTab === 0" class="content-section">
			<!-- 我的本次招亲 -->
			<current-matchmaking :currentInfo="currentInfo" @publish="handlePublish"
				@viewApplicants="handleViewApplicants" @viewProfile="handleViewProfile"
				@agreeExchange="handleAgreeExchange" />
		</view>

		<view v-else class="content-section">
			<!-- 历史记录 -->
			<history-list :historyList="historyList" @viewDetail="handleViewHistoryDetail" />
		</view>

		<!-- 发布招亲弹窗 -->
		<u-modal :show="showPublishModal" title="发布招亲" :show-cancel-button="true" confirmColor="#FF4E78"
			cancelColor="#999" @cancel="cancelPublish" @confirm="confirmPublish">
			<view class="modal-content">
				<view class="price-info" v-if="userInfo.gender  === 'male'">
					<u-icon name="error-circle" color="#FF4E78" size="32"></u-icon>
					<text class="price-text">男生发布招亲每次299元</text>
				</view>
				<view class="price-info" v-else>
					<u-icon name="checkmark-circle" color="#4CD964" size="32"></u-icon>
					<text class="price-text">女生免费发布招亲，不限次数</text>
				</view>
				<view class="tips">发布后信息将展示在招亲广场，有效期30天</view>
			</view>
		</u-modal>
		<tabBar />
	</view>
</template>
<script>
	import CurrentMatchmaking from '@/components/match/CurrentMatchmaking.vue'
	import HistoryList from '@/components/match/HistoryList.vue'
	export default {
		components: {
			CurrentMatchmaking,
			HistoryList
		},
		data() {
			return {
				tabs: [{
					name: '我的本次招亲'
				}, {
					name: '历史记录'
				}],
				currentTab: 0,
				showPublishModal: false,
				currentInfo: {
					id: 1,
					title: '寻找有缘人',
					content: '本人90后，身高175cm，本科毕业，从事IT行业，性格开朗，喜欢旅行和阅读。希望找到一位温柔善良、有共同语言的伴侣。',
					gender: 'male',
					age: 28,
					height: 175,
					education: '本科',
					job: 'IT工程师',
					hobbies: ['旅行', '阅读', '电影'],
					photos: [
						'/static/matchmaking/photo1.jpg',
						'/static/matchmaking/photo2.jpg'
					],
					status: 'published', // published-已发布, draft-草稿
					createTime: '2023-05-15',
					endTime: '2023-06-15',
					applicants: [{
							id: 101,
							name: '李小姐',
							age: 26,
							height: 165,
							education: '硕士',
							job: '教师',
							avatar: '/static/matchmaking/avatar1.jpg',
							distance: '3.5km'
						},
						{
							id: 102,
							name: '张女士',
							age: 27,
							height: 168,
							education: '本科',
							job: '设计师',
							avatar: '/static/matchmaking/avatar2.jpg',
							distance: '5.2km'
						}
					]
				},
				historyList: [{
						id: 2,
						title: '期待遇见你',
						content: '寻找性格开朗、有责任心的另一半',
						status: 'completed',
						createTime: '2023-03-10',
						endTime: '2023-04-10',
						applicantsCount: 8
					},
					{
						id: 3,
						title: '真诚寻找伴侣',
						content: '希望找到一位能够互相理解、支持的伴侣',
						status: 'completed',
						createTime: '2023-01-05',
						endTime: '2023-02-05',
						applicantsCount: 12
					}
				],
				userInfo: {
					id: 1001,
					name: '张先生',
					gender: 'male',
					avatar: '/static/avatar.jpg'
				}
			}
		},
		methods: {
			changeTab({
				index
			}) {
				this.currentTab = index
			},
			handlePublish() {
				this.showPublishModal = true
			},
			confirmPublish() {
				if (this.userInfo.gender === 'male') {
					// 男生需要支付
					uni.navigateTo({
						url: '/pages/match/components/publish?amount=299'
					})
				} else {
					// 女生免费
					uni.navigateTo({
						url: '/pages/match/components/publish'
					})
				}
			},
			cancelPublish() {
				this.showPublishModal = false
			},
			handleViewApplicants() {
				uni.navigateTo({
					url: '/pages/match/components/applicants?matchmakingId=' + this.currentInfo.id
				})
				this.cancelPublish()
			},
			handleViewProfile(userId) {
				console.log(111111)
				uni.navigateTo({
					url: '/pages/match/components/applicantsDetail?userId=' + userId
				})
				this.cancelPublish()
			},
			handleAgreeExchange(userId) {
				this.$u.toast(' 已同意交换微信，专属媒人会联系你们')
				// 这里可以调用API通知后台
			},
			handleViewHistoryDetail(item) {
				uni.navigateTo({
					url: '/pages/matchmaking/detail?id=' + item.id
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.matchmaking-container {
		background-color: #f8f8f8;
		min-height: 100vh;
		padding-bottom: 120rpx;
	}

	.u-tabs {
		background-color: #fff;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.content-section {
		// padding: 20rpx;
		margin-top: 10rpx;
	}

	.modal-content {
		padding: 30rpx;
		text-align: center;

		.price-info {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 20rpx;
		}

		.price-text {
			font-size: 32rpx;
			margin-left: 10rpx;
			color: #FF4E78;
			font-weight: bold;
		}

		.tips {
			font-size: 26rpx;
			color: #999;
			margin-top: 30rpx;
			line-height: 1.6;
		}
	}
</style>